import { useNavigate } from "react-router-dom";
import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";

import "./index.scss";

const NftStore = () => {
  const navigate = useNavigate();

  /**
   * 返回上一页
   */
  function handleGoBack() {
    navigate(-1); // 或者使用 history.go(-1)
  }

  // 列表数据
  const listData = [] as any;

  for (let i = 1; i < 5; i++) {
    const ran = Math.floor(Math.random() * 2);
    listData.push({
      id: i,
      name: ran == 0 ? "算力收入" : "(赎回钻石)ZS",
      datetime: "2024-12-01  12:00",
      type: ran,
      power: Math.floor(Math.random() * 100),
    });
  }

  return (
    <div className="nft-store-container">
      <div className="inner-container">
        <div className="hd-box">仓库</div>
        <div className="bd-box">
          <ul>
            {listData.map((item: any) => (
              <li key={item.id} className="item">
                <div className="item-box">
                  <div className="photo-box">
                    <img src="../images/dinosaur2.png" />
                  </div>
                  <div className="cnetre-box">
                    <div className="name-box"><span className="name">金属元素龙</span><span className="status">上架中</span></div>
                    <div className="introduce">
                      金属元素龙简介，介绍介绍介绍介绍介，介绍介绍介绍介绍介介绍介绍介绍介绍介
                    </div>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* 返回 */}
      <div className="bottom-box">
        <div className="return-back-btn" onClick={handleGoBack}>
          <KeyboardBackspaceIcon />
          <span>返回</span>
        </div>
      </div>
    </div>
  );
};

export default NftStore;
